import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import {Link} from 'dva/router';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Tabs,
  Table,
} from 'antd';
import Highlighter from 'react-highlight-words';
const {RangePicker} = DatePicker;
import StandardTable from 'components/OrderTable';
import PayedList from './BusinessPayedList';
import {status, statusMap} from './orderStatus';
import styles from './OrderList.less';
import {stringify} from 'qs';
import {DATA_HOST,} from '../../utils/setting';
import G from '../../utils/g';

const { TabPane } = Tabs;
const FormItem = Form.Item;
const {Option} = Select;
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');



@connect(({businessPay, loading}) => ({
  businessPay,
  loading: loading.models.rule,
}))
@Form.create()
export default class TableList extends PureComponent {
  state = {
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    searchText: '',
  };

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'businessPay/fetch',
      payload: {}
    });
    dispatch({
      type: 'businessPay/payedBusinessList',
      payload: {}
    });
  }

  getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys, selectedKeys, confirm, clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => { this.searchInput = node; }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button
          onClick={() => this.handleReset(clearFilters)}
          size="small"
          style={{ width: 90 }}
        >
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    },
    render: (text) => (
      <Highlighter
        highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
        searchWords={[this.state.searchText]}
        autoEscape
        textToHighlight={text.toString()}
      />
    ),
  })

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setState({ searchText: selectedKeys[0] });
  }

  handleReset = (clearFilters) => {
    clearFilters();
    this.setState({ searchText: '' });
  }

  render() {
    const {businessPay: {unPayBusinessList}, loading} = this.props;

    const columns = [
      {
        title: '商家',
        dataIndex: 'goods_nickname',
        key: 'goods_nickname',
        ...this.getColumnSearchProps('goods_nickname')
      },
      {
        title: '待结算订单数',
        dataIndex: 'order_count',
        key: 'order_count',
      },
      {
        title: '销售总额',
        dataIndex: 'sale_total',
        key: 'sale_total',
      },
      {
        title: '结算总额',
        dataIndex: 'settlement_total',
        key: 'settlement_total',
      },
      {
        title: '操作',
        render: (a, b) => (
          <Fragment>
            <Link to={`business-unpay?id=${b.goods_userId}`}>详情</Link>
          </Fragment>
        ),
      },
    ];

    return (
      <div>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <Tabs
              type="card"
            >
              <TabPane tab="待结算" key="0">
                <Table dataSource={unPayBusinessList} columns={columns} pagination={false} rowKey="goods_nickname" loading={loading} />
              </TabPane>
              <TabPane tab="已结算" key="1">
                <PayedList />
              </TabPane>
            </Tabs>
          </div>
        </Card>
      </div>
    );
  }
}
